<script setup lang="ts">
import Header from "@/components/Header/Header.vue";
import Footer from "@/components/Footer/Footer.vue";
import CodeMa from "@/components/CodeMa/CodeMa.vue";
import Search from "@/views/home/components/search/search.vue";
import Loign from "@/components/Loign/Loign.vue";
</script>

<template>
  <div class="app">
    <section class="top" v-if="$route.path!=='/404'">
      <Header>
        <search v-if="$route.path!=='/home'"></search>
      </Header>
    </section>
    <section class="main">
      <section class="container">
        <RouterView></RouterView>
      </section>
    </section>
    <section class="bottom" v-if="$route.path!=='/404'">
      <Footer></Footer>
    </section>
    <code-ma v-if="$route.path!=='/404'"></code-ma>
    <loign></loign>
  </div>
</template>

<style scoped>
.app {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .top {
    width: 100%;
    height: 70px;
    background-color: #ffffff;

  }

  .main {
    width: 100%;
    background-color: #f8f6f6;
  }

  .bottom {
    width: 100%;
    height: 50px;

  }

}
</style>
